<template>
  <div class="textarea">
    <el-button @click="$router.push('/homepage')" round style="font-size: 40px;height: 70px;width: 160px;margin: 10px">首 页</el-button>
    <el-divider/>
    <el-card class="content">
      <el-form
        v-model="cases"
        ref="info"
        size="small"
        label-width="180px"
        label-position="left">
          <el-form-item label="作者">
            <el-input size="large" v-model="author" type="primary"></el-input>
          </el-form-item>
          <el-form-item label="上传时间">
            <el-input size="large" v-model="cases.uploadtime.substring(0,10)" type="primary"></el-input>
          </el-form-item>
          <el-form-item label="时间段选择">
            <el-input size="large" v-model="cases.time" type="primary"></el-input>
          </el-form-item>
          <el-form-item label="区域类型">
            <el-input size="large" v-model="cases.areatype" type="primary"/>
          </el-form-item>
          <el-form-item label="类别">
            <el-input size="large" v-model="cases.type" type="primary"></el-input>
          </el-form-item>
          <el-form-item label="适用机型">
            <el-input
                v-model="cases.apply"
                type="primary"
                size="large"
                placeholder="适用机型" />
          </el-form-item>
          <el-form-item label="所属单位">
            <el-input
                v-model="cases.affiliation"
                type="primary"
                size="large"
                placeholder="所属单位" />
          </el-form-item>
          <el-form-item label="实案">
            <el-input type="textarea"
                      size="large"
                      :autosize="{ minRows: 6}"
                      placeholder="请输入内容"
                      v-model="cases.realcase" />
          </el-form-item>
          <el-form-item label="复盘反思">
            <el-input type="textarea"
                      size="large"
                      :autosize="{ minRows: 6}"
                      placeholder="请输入内容"
                      v-model="cases.reflection" />
          </el-form-item>
      <el-form-item label="下载文件">
        <el-button size="large"><el-link href="../../static/案例详情.pdf" download="案例详情.pdf"><i class="el-icon-download"></i>文件下载</el-link></el-button>
      </el-form-item>
    </el-form>
    </el-card>
    <div style="margin: 5%">
      <el-row>
        <el-col :span="20">
          <el-input type="textarea"
                    :autosize="{ minRows: 3}"
                    placeholder="请输入内容"
                    v-model="comment" />
        </el-col>
        <el-col :span="4">
          <el-button style="margin: 20px;width: 200px;height: 100px;font-size: 30px" type="primary" @click="addComment">发表评论</el-button>
        </el-col>
      </el-row>
      <div v-for="i in comments" class="comments">
        <p class="name">{{i.author }}</p>
        <p style="font-size: 24px">{{i.comment }}</p>
        <el-divider/>
      </div>
    </div>
  </div>
</template>

<script>
import {insertComment, getDetail} from "@/api/case";

export default {
  name: "Detail",
  data(){
    return {
      author:'',
      cases:{},
      comments:[],
      comment:''
    }
  },
  methods:{
    init(){
      let cid = this.$route.query.cid;
      getDetail({cid:cid})
          .then(res=>{
            this.author=res.author;
            this.comments = res.comments;
            this.cases=res.message;
            this.cases.time = this.timeFilter(this.cases.time)
            this.cases.areatype = this.areaFilter(this.cases.areatype)
            this.cases.type = this.typeFilter(this.cases.type)
          })
    },
    areaFilter(area){
      switch (area){
        case 0:
          return '高原';
        case 1:
          return '热带';
        case 2:
          return '寒带';
        case 3:
          return '温带';
        case 4:
          return '沿海';
        case 5:
          return '沙漠&戈壁';
      }
    },
    timeFilter(time){
      switch (time){
        case 0:
          return '2001-2005';
        case 1:
          return '2006-2010';
        case 2:
          return '2011-2015';
        case 3:
          return '2016-2020';
        case 4:
          return '2021-2025';
      }
    },
    typeFilter(val){
      switch (val){
        case 0:
          return '筹措类';
        case 1:
            return '供应类'
        case 2:
          return '管理类'
        case 3:
          return '修理类'
        case 4:
          return '战备类'
      }
    },
    async addComment(){
      await insertComment({uid:localStorage.getItem('uid'),comment:this.comment,cid:this.$route.query.cid})
      this.$message.success("评论成功！")
      this.$router.go(0)
    }
  },
  created() {
    this.init()
  },
}
</script>

<style scoped>
.el-header, .el-footer {
  text-align: center;
  line-height: 60px;
  height: 25%;
}
.el-main {
  background-color: #FFFFFF;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 40%;
}
.content{
  margin:30px;
}
.textarea >>> .el-textarea__inner{
  font-size:26px !important;
}

.textarea >>> .el-input__inner{
  font-size:28px !important;
}
.textarea >>> .el-form-item__label{
  font-size:24px !important;
}
.textarea{
  padding-bottom: 1.5%;
  margin: 10px;
  /*background: url(../assets/bg4.jpg);*/
  /*background-size: 100%,100%;*/
}
.comments{
  margin: 30px;
  height: 100px;
}
.name{
  color: #6d757a;
  font-weight: bold;
  font-size: 18px
}
</style>